<template>
  <div class="notification bg-fog-2 h-100vh">
    <div
      class="notification__header h-51px flex justify-between px-16px items-center"
    >
      <span class="text-13px text-text-3">{{ $t("notification") }}</span>
      <van-icon
        name="cross"
        class="text-text-6 font-900 text-14px"
        @click="$router.go(-1)"
      />
    </div>
    <div class="notification__content p-18px bg-fog-10">
      <Tabs :options="options" v-model:value="value" />
      <div class="p-12px">
        <Card />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Tabs from "@/components/tabs/index.vue";
import Card from "./components/card.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const $t = key => {
  return t("notification." + key);
};

const options = ref([
  { label: "System", value: "System" },
  { label: "Notice", value: "Notice" }
]);
const value = ref("System");
</script>

<style lang="less" scoped>
.notification {
  .bar-item {
    &--active {
      background-image: var(--fog-11);
      border-bottom: 1px solid var(--border-1);
      color: var(--text-3);
    }
  }
}
</style>
